<script setup>
  import VuePdfEmbed from "vue-pdf-embed";
  import { createLoadingTask } from "vue3-pdfjs";
  import { reactive, computed, watch, toRefs } from "vue"
  const props = defineProps({
    pdfUrl: {
      type: String,
      required: true,
    },
    scale: {
      type: Number,
      required: false,
      default: 1,
    }
  })

  const { pdfUrl, scale } = toRefs(props)

  const pdfState = reactive({
    source: pdfUrl,
    pageNum: 1,
    scale: scale,
    numPages: 1,
    isError: false,
  })
  
  const styleScale = computed(() => `transform:scale(${pdfState.scale})`)

  // function lastPage() {
  //   if (pdfState.pageNum > 1) {
  //     pdfState.pageNum -= 1;
  //   }
  // }
  // function nextPage() {
  //     if (pdfState.pageNum < pdfState.numPages) {
  //       pdfState.pageNum += 1;
  //     }
  // }
  // function pageZoomOut() {
  //     if (pdfState.scale < 2) {
  //       pdfState.scale += 0.1;
  //     }
  // }
  // function pageZoomIn() {
  //     if (pdfState.scale > 1) {
  //       pdfState.scale -= 0.1;
  //     }
  // }

  watch(() => pdfState.source,  (n) => {
    pdfState.isError = false
    if (n.length > 1) {
      pdfState.pageNum = 1  // 重置页码
      const loadingTask = createLoadingTask(pdfState.source)
      loadingTask.promise.then((pdf) => {
        pdfState.numPages = pdf.numPages;
      }).catch(() => {
        pdfState.isError = true
      });
    }
  }, { immediate: true })
</script>
<template>
  <div class="pdf-preview">
    <div class="pdf-wrap">
      <vue-pdf-embed
        v-for="p in pdfState.numPages"
        :key="p"
        :source="pdfState.source"
        :style="styleScale"
        :page="p"
        class="vue-pdf-embed"
      />
    </div>
    <div v-if="pdfState.isError" class="vue-pdf-embed">
      获取文件失败了...
    </div>
    <!--
    <div class="page-tool" v-if="pdfState.source.length>1">
      <div class="page-tool-item" @click="lastPage">上一页</div>
      <div class="page-tool-item">{{pdfState.pageNum}}/{{pdfState.numPages}}</div>
      <div class="page-tool-item" @click="nextPage">下一页</div>
      <div class="page-tool-item" @click="pageZoomOut">放大</div>
      <div class="page-tool-item" @click="pageZoomIn">缩小</div>
    </div> 
    -->
  </div>
</template>
<style scoped lang="scss">
  .pdf-preview {
    position: relative;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .pdf-wrap{
      overflow-y:auto;
    }
    .vue-pdf-embed {
        text-align: center;
        width: calc(100% - 20px);
        border: 1px solid #e5e5e5;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .page-tool {
      // position: relative;
      bottom: 35px;
      padding-left: 15px;
      padding-right: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      cursor: pointer;
      // margin-left: 50%;
      // transform: translateX(-50%);
      .page-tool-item {
        padding: 8px 15px;
        padding-left: 10px;
        cursor: pointer;
      }
   }
  }
</style>